<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-dv-list/List.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-$ui_dv_my-dv-bar.html">$ui/dv/my-dv-bar</a></li><li><a href="module-$ui_dv_my-dv-box.html">$ui/dv/my-dv-box</a></li><li><a href="module-$ui_dv_my-dv-fill.html">$ui/dv/my-dv-fill</a></li><li><a href="module-$ui_dv_my-dv-geo.html">$ui/dv/my-dv-geo</a></li><li><a href="module-$ui_dv_my-dv-icon.html">$ui/dv/my-dv-icon</a></li><li><a href="module-$ui_dv_my-dv-indicator.html">$ui/dv/my-dv-indicator</a></li><li><a href="module-$ui_dv_my-dv-line.html">$ui/dv/my-dv-line</a></li><li><a href="module-$ui_dv_my-dv-loading.html">$ui/dv/my-dv-loading</a></li><li><a href="module-$ui_dv_my-dv-page.html">$ui/dv/my-dv-page</a></li><li><a href="module-$ui_dv_my-dv-pictorial.html">$ui/dv/my-dv-pictorial</a></li><li><a href="module-$ui_dv_my-dv-pie.html">$ui/dv/my-dv-pie</a></li><li><a href="module-$ui_dv_my-dv-progress.html">$ui/dv/my-dv-progress</a></li><li><a href="module-$ui_dv_my-dv-radar.html">$ui/dv/my-dv-radar</a></li><li><a href="module-$ui_dv_my-dv-rank.html">$ui/dv/my-dv-rank</a></li><li><a href="module-$ui_dv_my-dv-ring.html">$ui/dv/my-dv-ring</a></li><li></li><li><a href="module-$ui_dv_my-dv-screen.html">$ui/dv/my-dv-screen</a></li><li><a href="module-$ui_dv_my-dv-starry.html">$ui/dv/my-dv-starry</a></li><li><a href="module-$ui_dv_my-dv-text.html">$ui/dv/my-dv-text</a></li><li><a href="module-$ui_dv_my-dv-title.html">$ui/dv/my-dv-title</a></li></ul><h3>Global</h3><ul><li><a href="global.html#darken">darken</a></li><li><a href="global.html#fade">fade</a></li><li><a href="global.html#getCircleRadianPoint">getCircleRadianPoint</a></li><li><a href="global.html#getColorByKeyword">getColorByKeyword</a></li><li><a href="global.html#getColorFromRgbValue">getColorFromRgbValue</a></li><li><a href="global.html#getOpacity">getOpacity</a></li><li><a href="global.html#getRgbaValue">getRgbaValue</a></li><li><a href="global.html#getRgbValue">getRgbValue</a></li><li><a href="global.html#getRgbValueFromHex">getRgbValueFromHex</a></li><li><a href="global.html#getRgbValueFromRgb">getRgbValueFromRgb</a></li><li><a href="global.html#lighten">lighten</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#toHex">toHex</a></li><li><a href="global.html#toRgb">toRgb</a></li><li><a href="global.html#validator">validator</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-dv-list/List.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;Box class="my-dv-list" :class="classes" :default-height="contentHeight" v-bind="$attrs">
    &lt;table v-if="header"
           ref="header"
           class="my-dv-list__header"
           cellspacing="0"
           cellpadding="0">
      &lt;ListColGroup :columns="tableColumns" :default-width="cellWidth">&lt;/ListColGroup>
      &lt;thead>
      &lt;tr>
        &lt;th v-for="(col, index) in tableColumns"
            :key="`tr_${_uid}_col_${index}`">
          &lt;slot name="column" :col="col" :index="index">
            {{col.label}}
          &lt;/slot>
        &lt;/th>
      &lt;/tr>
      &lt;/thead>
    &lt;/table>
    &lt;MyMarquee class="my-dv-list__body-wrapper"
               ref="marquee"
               :data="rows"
               :style="bodyStyle"
               @resize="marqueeResize"
               v-bind="scrollProps">
      &lt;table v-if="rows.length" class="my-dv-list__body"
             cellspacing="0"
             cellpadding="0">
        &lt;ListColGroup :columns="tableColumns" :default-width="cellWidth">&lt;/ListColGroup>
        &lt;tr v-for="(row, rowIndex) in rows" :key="`row_${rowIndex}`">
          &lt;td v-for="(item, itemIndex) in getRow(row)" :key="`item_${itemIndex}`">
            &lt;slot :name="getSlotName(itemIndex)" :row="row" :item="item" :index="itemIndex" :rowIndex="rowIndex">
              {{item}}
            &lt;/slot>
          &lt;/td>
        &lt;/tr>
      &lt;/table>
      &lt;div v-else class="my-dv-list__empty">
        &lt;slot name="empty">暂无数据&lt;/slot>
      &lt;/div>
    &lt;/MyMarquee>

  &lt;/Box>
&lt;/template>

&lt;script>
  /**
   * 列表
   * @module: $ui/dv/my-dv-list
   */
  import Box from '../my-dv-box'
  import ListColGroup from './ColGroup'
  import {MyMarquee} from '$ui'

  export default {
    name: 'MyDvList',
    components: {
      Box,
      ListColGroup,
      MyMarquee
    },
    /**
     * 属性参数
     * @member props
     * @property {String[]|Object[]} [columns] 数据列
     * @property {string} [columns.label] 列头文本
     * @property {string} [columns.prop] 列名称，如果行是对象格式，必须要设置
     * @property {number} [columns.width] 列宽度
     * @property {Array} [rows] 数据行
     * @property {boolean} [header=true] 显示列头
     * @property {boolean} [border] 显示边框
     * @property {boolean} [radius] 显示圆角
     * @property {Boolean|Object} [scroll] 滚动配置
     */
    props: {
      // [{label, prop, width}]
      columns: {
        type: Array,
        default() {
          return []
        }
      },
      rows: {
        type: Array,
        default() {
          return []
        }
      },
      header: {
        type: Boolean,
        default: true
      },
      border: Boolean,
      radius: Boolean,
      scroll: [Boolean, Object]
    },
    data() {
      return {
        headerHeight: 0,
        headerWidth: 0,
        contentHeight: 'auto'
      }
    },
    computed: {
      tableColumns() {
        return this.columns.map(col => {
          return typeof col === 'object' ? col : {label: col}
        })
      },
      classes() {
        return {
          'is-border': this.border,
          'is-radius': this.radius,
          'is-no-header': !this.header,
          'is-odd': this.rows.length % 2 === 0
        }
      },
      bodyStyle() {
        return {
          height: `calc(100% - ${this.headerHeight}px)`
        }
      },
      scrollProps() {
        return {
          disabled: !this.scroll,
          speed: 1,
          ...this.scroll
        }
      },
      cellWidth() {
        let total = this.headerWidth
        let count = 0
        this.tableColumns.forEach(n => {
          if (n.width || n.minWidth) {
            total -= (n.width || n.minWidth || 0)
          } else {
            ++count
          }
        })
        return count > 0 ? total / count : 0
      }
    },
    watch: {
      header() {
        this.updateHeaderHeight()
      }
    },
    methods: {
      getRow(row) {
        if (Array.isArray(row)) {
          return row
        }
        return this.tableColumns.map(col => row[col.prop])
      },
      getSlotName(itemIndex) {
        const col = this.tableColumns[itemIndex]
        return col?.prop
      },
      updateHeaderHeight() {
        const rect = this.$refs?.header?.getBoundingClientRect()
        this.headerHeight = rect ? rect.height : 0
        this.headerWidth = rect ? rect.width : 0
        if (this.$refs.marquee) {
          this.$nextTick(this.$refs.marquee.renderCopyHtml)
        }
      },
      marqueeResize({height}) {
        if (this.$attrs.height) {
          this.contentHeight = this.$attrs.height
        } else {
          this.contentHeight = height ? `${height}px` : 'auto'
        }
      }
    },
    mounted() {
      this.updateHeaderHeight()
      this.marqueeResize({})
    }
  }
&lt;/script>

&lt;style lang="scss">
  @import "../../style/vars";


  @include b(dv-list) {
    table {
      width: 100%;
      border-collapse: collapse;

    }

    td, th {
      padding: 8px 10px;
    }

    @include e(header) {
      background: $--dv-color-table-header;

      th {
        border-bottom: transparent !important;
      }
    }

    @include e(body-wrapper) {
      background: $--dv-color-background;
      color: $--dv-text-normal;
    }

    @include e(body) {
      tr:nth-child(odd) {
        background: $--dv-color-table-stripe;
      }
      tr:hover {
        background: $--dv-color-table-hover;
      }
    }

    @include e(empty) {
      padding: 20px;
      text-align: center;
      color: $--dv-text-secondary;
    }

    @include when(border) {
      td, th {
        border: 1px solid $--dv-color-border;
      }
    }

    @include when(radius) {

      @include e(header) {
        border-radius: 4px 4px 0 0;
      }

      @include e(body-wrapper) {
        border-radius: 0 0 4px 4px;
      }
      @include when(no-header) {
        @include e(body-wrapper) {
          border-radius: 4px 4px 4px 4px;
        }
      }
    }

    @include when(odd) {
      .my-marquee__copy-content {
        tr:nth-child(odd) {
          background: transparent;
        }

        tr:nth-child(even) {
          background: $--dv-color-table-stripe;
        }
      }
    }

  }
&lt;/style>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Tue Nov 17 2020 17:07:28 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
